


$(function(){
//文章数量和评论数量
    $.ajax({
        url:"admin/data/info",
        type:"get",
        success:function(res){
            $(`.spannel:eq(0)`).children().eq(0).text(res.totalArticle)
            $(`.scolor01`).children().eq(0).text(res.dayArticle)
            $(`.scolor02`).children().eq(0).text(res.totalComment)
            $(`.scolor03`).children().eq(0).text(res.dayComment)
        }
    })
   // 折线图的数据

        // var json = '{"code":200,"msg":"获取成功","date":[{"date":"2019-05-20","count":23},{"date":"2019-05-21","count":19},{"date":"2019-05-22","count":29},{"date":"2019-05-23","count":24},{"date":"2019-05-24","count":28},{"date":"2019-05-25","count":28},{"date":"2019-05-26","count":19},{"date":"2019-05-27","count":25},{"date":"2019-05-28","count":25}]}';
        $.ajax({
            url:"admin/data/article",
            type:"get",
            success:function(res){
               
               let json=JSON.stringify(res)
                var obj = JSON.parse(json);
                loadEchars(obj);
              
                function loadEchars(obj) {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('curve_show'));
        
                    // var data = [];
                    // var date = [];
                    // for (var i = 0; i < obj.date.length; i++) {
                    //     data.push(obj.date[i].count);
                    //     date.push(obj.date[i].date);
                    // }
                    console.log(obj)
                    let dates=res.date.map((item)=> item.date)
                    let counts=res.date.map((item)=>item.count)
                    console.log(dates,counts)
                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '月新增文章数',
                        },
        
                        xAxis: {
                            name: '日',
                            type: 'category',
                            boundaryGap: false,
                            data: dates
                        },
                        legend: {
                            data: ['新增文章'],
                            top: '40'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView: { readOnly: false },
                                magicType: { type: ['line', 'bar'] },
                                restore: {},
                                saveAsImage: {}
                            },
                            right: 50
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%'],
                            min:"0",
                            max:"40"
                            // data:counts
                        },
                        series: [
                            {
                                name: '新增文章',
                                type: 'line',
                                smooth: true,
                                // symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    color: '#f80'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(255,136,0,0.39)'
                                    }, {
                                        offset: .34,
                                        color: 'rgba(255,180,0,0.25)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255,222,0,0.00)'
                                    }])
                                },
                                data: counts
                            }
                        ],
                    }
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        })

//环形图的数据
let data=[{ value: 335, name: '爱星星' },{ value: 310, name: '趣哈哈' },{ value: 234, name: '爱呵呵' },{ value: 135, name: '爱谢谢' },{ value: 548, name: '爱嘻嘻' }]
    $.ajax({
        url:"admin/data/category",
        type:"get",
        success:function(res) {
            // window.location.reload()
            let aaa
            for(let i=0;i<res.date.length;i++){
                    res.date[i].value=res.date[i].articles
                  delete res.date[i].articles
                  aaa=res
            }
            data=aaa.date
            let dataname=data.map((item)=>item.name)
            
            console.log(dataname) 
  // 基于准备好的dom，初始化echarts实例
  var myChart1 = echarts.init(document.getElementById('pie_show'));
  
  
  option1 = {
      title: {
          left: 'center',
          text: '分类文章数量比',
      },
      tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
          orient: 'horizontal',
          x: 'center',
          data: dataname,
          top: 20
      },
      color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
      series: [
          {
              name: '分类名称',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                  emphasis: {
                      show: true,
                      textStyle: {
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  }
              },
              data: data
          }
      ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart1.setOption(option1);
}
// for(let i=0;i<res.date.length;i++){
//     res.date[i].value=res.date[i].articles
//     // datc[i].name=res.date[i].name
//     // datc[i].value=res.date[i].value
// // console.log(data)
// // let cc=data
// console.log(res.date)
// // let datc=res.date:{name,value}
// // .value=datc[i].articles
//             // data=[ { value: 335, name: '爱星星' },
//             // { value: 310, name: '趣哈哈' },
//             // { value: 234, name: '爱呵呵' },
//             // { value: 135, name: '爱谢谢' },
//             // { value: 548, name: '爱嘻嘻' }]

//         }
    })
    //柱状图、、、
    $.ajax({
        url:'admin/data/article',
        type:"get",
        success:function (res) {
            console.log(res)
            let datess=res.date.map((item)=>item.date)
            let num=res.date.map((item)=>item.count)
            var myChart2 = echarts.init(document.getElementById('column_show'));

            option2 = {
                title: {
                    left: 'center',
                    // text: '',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    
                },
                // legend: {
                //     data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
                //     top:30
                // },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: datess
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                series: [
                    {
                        // name: '爱生活',
                        type: 'bar',
                        data: num,
                        barWidth:`20%`,
                        
                    },
                    // {barWidth:20%}
                    // {
                    //     name: '趣美味',
                    //     type: 'bar',
                    //     data: [220, 132, 101, 134]
                    // },
                    // {
                    //     name: '爱旅行',
                    //     type: 'bar',
                    //     data: [220, 182, 191, 234]
                    // },
                    // {
                    //     name: '爱电影',
                    //     type: 'bar',
                    //     data: [150, 232, 201, 154]
                    // },
                    // {
                    //     name: '爱游泳',
                    //     type: 'bar',
                    //     data: [262, 118, 364, 426],
                    // },
    
                ]
            };
    
    
            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);
        }
    })

})